<template>
  <fieldset class="ones">
    <legend>zi</legend>
    <form action="" @submit.prevent="postFrom()">
        <input type="text" placeholder="请输入传给父组件的内容" v-model.lazy.trim='txt' required/>
        <input type="submit" value="提交">
    </form>
  </fieldset>
</template>

<script setup>
import { ref } from "vue";
// const emits = defineEmits(['sendtxt'])
const emits = defineEmits({
    // 对sendtxt事件中所有函数参数做非空验证
    sendtxt : (val)=>{
        if (val != '' && val !='123') {
            return true;
        }else{
            console.log('不可向父组件传递一个空数据或传递123');
            return false;
        }
    }
})
let txt  = ref('');//发送给父组件的数据

// 提交事件
const postFrom = ()=>{
    //emits('自定义函数'，子组件的数据)
    //emits/this.$emit()为捆绑出发：在触发当前提交事件的同时也会出发另一个函数sendtxt事件
    emits('sendtxt',txt.value);
    txt.value = '';
}
</script>

<style scoped>
.ones{
    width: 80%;
    margin: 20px auto;
}
.ones input{
    width: 100%;
    line-height: 35px;
    border-radius: 8px;
    margin: 10px auto;
}
</style>